[comment]: # (This presentation was made with markdown-slides) [comment]: # (This is a CommonMark compliant comment. It will not be included in the presentation.) [comment]: # (Compile this presentation with the command below) [comment]: # (mdslides presentation.md --include media) [comment]: # (Set the theme:) [comment]: # (The list of themes is at https://revealjs.com/themes/) [comment]: # (The list of code themes is at https://highlightjs.org/) [comment]: # "You can also use quotes instead of parenthesis" [comment]: # 'Single quotes work too' [comment]: # (Pass optional settings to reveal.js:) [comment]: # (markdown: { smartypants: true }) [comment]: # (Other settings are documented at https://revealjs.com/config/) John Doe | College University | July 3, 2020 # Great Title [comment]: # (A comment starting with three or more !!! marks a slide break.)

This is a sample presentation to showcase [markdown-slides](https://gitlab.com/da_doomer/markdown-slides). The source markdown file is [presentation.md](https://gitlab.com/da_doomer/markdown-slides/-/blob/master/example/presentation.md).

Use markdown to harness the power of Reveal.js.

## Lists and math - Using markdown to write presentations - Easy lists - LaTeX math syntax `$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`

Code syntax highlighting and animations: ```js [1-2|3|4] let a = 1; let b = 2; let c = x => 1 + 2 + x; c(3); ``` Notice the background color change. [comment]: # (section attributes for the just-ending slide can be specified:)

Use background videos, background pictures and **text formatting**, everything *without breaking* your markdown files. [comment]: # (Other background options: https://revealjs.com/backgrounds/)

Even speaker notes, accessed through the `S` key on your keyboard. (You may have to allow pop-up windows and try again.) Note: This will only appear in the speaker view! 🤯

## Pictures  <!-- .element: style="height:50vh; max-width:80vw; image-rendering: crisp-edges;" --> Showcase media including images, videos and animations.

## Animations - This is an example list - Just to showcase Reveal.js' animations

## Animations - This is an example list - Just to showcase Reveal.js' animations - This item will be automatically faded-in

```js [1-2|3|4] let a = 1; let b = 2; let c = x => 1 + 2 + x; c(3); ``` <!-- .element: data-id="code" -->

```js [5] let a = 1; let b = 2; let c = x => 1 + 2 + x; c(3); c(5); ``` <!-- .element: data-id="code" --> Animate code as well <!-- .element: class="fragment" data-fragment-index="1" -->

Insert Youtube videos. <iframe width="560" height="315" src="https://www.youtube.com/embed/KPfzRSBzNX4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Insert local videos. <iframe width="560" height="315" src="media/video.mp4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Download [markdown-slides](https://gitlab.com/da_doomer/markdown-slides)!

A couple more examples follow.

 ***use markdown to write slides*** Author Name

Press down on your keyboard or swipe down.

**Vertical slides!** (thanks [@porvik!](https://gitlab.com/da_doomer/markdown-slides/-/issues/8))

As many vertical slides as you like.

Add tables: | Insert | Tables | | ------ | ------ | | A row | Another| | text | more |

## Vertical separator ---------- Some other text.

You can also use in-line HTML. <div style="font-size: 1em;"> small </div> <div style="font-size: 5em;"> large </div>